CSS ์คํฐ๋ธ ๊ท์น์ ์๋ฆฌ ํ์์ CSS ์ ์๋ฅผ ๋ง๋ค์ด ํจ๊ณผ์ ์ธ ๋จ์ ๋ฐ ํตํฉ ํ ์คํธ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ๋ ๊ฐ๋ ฅํ ๊ธฐ์ ์ ๋๋ค. ์ปดํฌ๋ํธ ๊ฒฉ๋ฆฌ, ์คํ์ผ ๋ก์ง ๊ฒ์ฆ, ์๊ฐ์ ์ผ๊ด์ฑ ๋ณด์ฅ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ์ธ์.
CSS ์คํฐ๋ธ ๊ท์น: ๊ฒฌ๊ณ ํ ํ ์คํ ์ ์ํ ์๋ฆฌ ํ์์ ์ ์
์น ๊ฐ๋ฐ ๋ถ์ผ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ขฐ์ฑ๊ณผ ์๊ฐ์ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ํ ์คํธ๊ฐ ์ข ์ข ์ค์ฌ์ด ๋์ง๋ง, CSS ํ ์คํธ๋ ์์ฃผ ๊ฐ๊ณผ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ํนํ ๋ณต์กํ ์ปดํฌ๋ํธ์์ CSS ๋์์ ๊ฒ์ฆํ๋ ๊ฒ์ ์ธ๋ จ๋๊ณ ์์ธก ๊ฐ๋ฅํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ๊ธฐ์ ์ค ํ๋๊ฐ ๋ฐ๋ก CSS ์คํฐ๋ธ ๊ท์น์ ๋๋ค.
CSS ์คํฐ๋ธ ๊ท์น์ด๋ ๋ฌด์์ธ๊ฐ?
CSS ์คํฐ๋ธ ๊ท์น์ ๋ณธ์ง์ ์ผ๋ก ํ ์คํธ ์ค์ ์ฌ์ฉ๋๋ ์๋ฆฌ ํ์์ CSS ์ ์์ ๋๋ค. ์ด๋ฅผ ํตํด ํน์ ์ปดํฌ๋ํธ๋ ์์์ ๊ธฐ๋ณธ ์คํ์ผ์ ๋จ์ํ๋๊ฑฐ๋ ์ ์ด๋ ์คํ์ผ ์งํฉ์ผ๋ก ์ฌ์ ์ํ์ฌ ๊ฒฉ๋ฆฌํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ฒฉ๋ฆฌ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ฒด์ ์ธ CSS ์ํคํ ์ฒ์ ๋ณต์ก์ฑ๊ณผ๋ ๋ ๋ฆฝ์ ์ผ๋ก, ์์ธก ๊ฐ๋ฅํ ํ๊ฒฝ์์ ์ปดํฌ๋ํธ์ ๋์์ ํ ์คํธํ ์ ์๊ฒ ํด์ค๋๋ค.
ํ ์คํธ ํ๊ฒฝ์ ์ฃผ์ ํ์ฌ ์ฃผ์ด์ง ์์์ ์ผ๋ฐ์ ์ผ๋ก ์ ์ฉ๋ ์ค์ CSS ๊ท์น์ ๋์ฒดํ๊ฑฐ๋ ๋ณด๊ฐํ๋ "๋๋ฏธ(dummy)" CSS ๊ท์น์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. ์ด ์คํฐ๋ธ ๊ท์น์ ์ผ๋ฐ์ ์ผ๋ก ์์, ๋ฐฐ๊ฒฝ์, ํ ๋๋ฆฌ ๋๋ ๋์คํ๋ ์ด์ ๊ฐ์ ๊ธฐ๋ณธ ์์ฑ์ ์๋ ค์ง ๊ฐ์ผ๋ก ์ค์ ํ์ฌ, ์ ์ด๋ ์กฐ๊ฑด ํ์์ ์ปดํฌ๋ํธ์ ์คํ์ผ๋ง ๋ก์ง์ด ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํ ์ ์๊ฒ ํด์ค๋๋ค.
์ CSS ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํด์ผ ํ๋๊ฐ?
CSS ์คํฐ๋ธ ๊ท์น์ ํ ์คํธ ์ํฌํ๋ก์์ ๋ช ๊ฐ์ง ์ค์ํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
- ๊ฒฉ๋ฆฌ: ์ปดํฌ๋ํธ์ ๊ธฐ๋ณธ ์คํ์ผ์ ์ฌ์ ์ํจ์ผ๋ก์จ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ CSS ๊ท์น์ ์ํฅ์ผ๋ก๋ถํฐ ๊ฒฉ๋ฆฌํฉ๋๋ค. ์ด๋ ์ ์ฌ์ ์ธ ๊ฐ์ญ์ ์ ๊ฑฐํ๊ณ ์คํ์ผ๋ง ๋ฌธ์ ์ ์์ธ์ ์ ํํ ์ฐพ์๋ด๋ ๊ฒ์ ๋ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
- ์์ธก ๊ฐ๋ฅ์ฑ: ์คํฐ๋ธ ๊ท์น์ ์์ธก ๊ฐ๋ฅํ ํ ์คํธ ํ๊ฒฝ์ ๋ง๋ค์ด, ์ ํ๋ฆฌ์ผ์ด์ CSS์ ์์ธก ๋ถ๊ฐ๋ฅํ ๋ณํ์ ํ ์คํธ๊ฐ ์ํฅ์ ๋ฐ์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ๋จ์ํ๋ ํ ์คํธ: ์ ํ๋ ์คํ์ผ ์งํฉ์ ์ง์คํจ์ผ๋ก์จ ํ ์คํธ๋ฅผ ๋จ์ํํ๊ณ ์ดํดํ๊ณ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฝ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
- ์คํ์ผ๋ง ๋ก์ง ๊ฒ์ฆ: ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ๋ฉด ์ปดํฌ๋ํธ์ ์คํ์ผ๋ง ๋ก์ง(์: ์ํ๋ props์ ๊ธฐ๋ฐํ ์กฐ๊ฑด๋ถ ์คํ์ผ๋ง)์ด ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํ ์ ์์ต๋๋ค.
- ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ํ ์คํธ: ๊ฐ๋ณ ์ปดํฌ๋ํธ ์คํ์ผ๋ง์ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๋ ๊ฒ์ด ์ค์ํ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์ํคํ ์ฒ์์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
์ธ์ CSS ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํด์ผ ํ๋๊ฐ?
CSS ์คํฐ๋ธ ๊ท์น์ ๋ค์๊ณผ ๊ฐ์ ์๋๋ฆฌ์ค์์ ํนํ ์ ์ฉํฉ๋๋ค:
- ๋จ์ ํ ์คํธ: ๊ฐ๋ณ ์ปดํฌ๋ํธ๋ฅผ ๊ฒฉ๋ฆฌํ์ฌ ํ ์คํธํ ๋, ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ์ฌ ์ธ๋ถ CSS ์คํ์ผ์ ๋ํ ์ปดํฌ๋ํธ์ ์์กด์ฑ์ ๋ชจ์(mock)ํ ์ ์์ต๋๋ค.
- ํตํฉ ํ ์คํธ: ์ฌ๋ฌ ์ปดํฌ๋ํธ ๊ฐ์ ์ํธ ์์ฉ์ ํ ์คํธํ ๋, ํ ์ปดํฌ๋ํธ์ ์ธ๊ด์ ์ ์ดํ๋ฉด์ ๋ค๋ฅธ ์ปดํฌ๋ํธ์ ๋์์ ์ง์คํ๊ธฐ ์ํด ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ํ๊ท ํ ์คํธ: ์คํ์ผ๋ง ํ๊ท์ ์์ธ์ ์๋ณํ ๋, ๋ฌธ์ ๊ฐ ์๋ ์ปดํฌ๋ํธ๋ฅผ ๊ฒฉ๋ฆฌํ๊ณ ํด๋น ์คํ์ผ์ด ์์๋๋ก ๋์ํ๋์ง ํ์ธํ๊ธฐ ์ํด ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ๋ฐ์ํ ๋์์ธ ํ ์คํธ: ์คํฐ๋ธ ๊ท์น์ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ๋ ์ฅ์น ๋ฐฉํฅ์ ์๋ฎฌ๋ ์ด์ ํ์ฌ ์ปดํฌ๋ํธ์ ๋ฐ์์ฑ์ ํ ์คํธํ ์ ์์ต๋๋ค. ํน์ ์น์๋ฅผ ๊ฐ์ ํ๊ฑฐ๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ๋จ์ํ๋ ๋ฒ์ ์ผ๋ก ์ฌ์ ์ํจ์ผ๋ก์จ ๋ค์ํ ์ฅ์น์์ ์ผ๊ด๋ ๋์์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
- ํ ๋ง๊ฐ ์ ์ฉ๋ ์ ํ๋ฆฌ์ผ์ด์ ํ ์คํธ: ์ฌ๋ฌ ํ ๋ง๊ฐ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์คํฐ๋ธ ๊ท์น์ ํน์ ํ ๋ง์ ์คํ์ผ์ ๊ฐ์ ํ์ฌ ์ปดํฌ๋ํธ๊ฐ ๋ค๋ฅธ ํ ๋ง ์๋์์๋ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋์ง ํ์ธํ ์ ์์ต๋๋ค.
CSS ์คํฐ๋ธ ๊ท์น ๊ตฌํ ๋ฐฉ๋ฒ
CSS ์คํฐ๋ธ ๊ท์น์ ๊ตฌํ์ ์ผ๋ฐ์ ์ผ๋ก ๋ค์ ๋จ๊ณ๋ฅผ ํฌํจํฉ๋๋ค:
- ๋์ ์์ ์๋ณ: ๊ฒฉ๋ฆฌํ๊ณ ํ ์คํธํ๋ ค๋ ํน์ ์์ ๋๋ ์ปดํฌ๋ํธ๋ฅผ ๊ฒฐ์ ํฉ๋๋ค.
- ์คํฐ๋ธ ๊ท์น ์์ฑ: ๋์ ์์์ ๊ธฐ๋ณธ ์คํ์ผ์ ๋จ์ํ๋๊ฑฐ๋ ์ ์ด๋ ์คํ์ผ ์งํฉ์ผ๋ก ์ฌ์ ์ํ๋ CSS ๊ท์น์ ์ ์ํฉ๋๋ค. ์ด๋ ์ข ์ข ํ ์คํธ ํ๋ ์์ํฌ์ ์ค์ ๋ด์์ ์ํ๋ฉ๋๋ค.
- ์คํฐ๋ธ ๊ท์น ์ฃผ์
: ํ
์คํธ๋ฅผ ์คํํ๊ธฐ ์ ์ ํ
์คํธ ํ๊ฒฝ์ ์คํฐ๋ธ ๊ท์น์ ์ฃผ์
ํฉ๋๋ค. ์ด๋ ๋์ ์ผ๋ก
<style>์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ๊ณ ๋ฌธ์์<head>์ ์ถ๊ฐํ์ฌ ๋ฌ์ฑํ ์ ์์ต๋๋ค. - ํ ์คํธ ์คํ: ํ ์คํธ๋ฅผ ์คํํ๊ณ ์คํฐ๋ธ ๊ท์น์ ์ํด ๋ถ๊ณผ๋ ์ ์ด๋ ์กฐ๊ฑด ํ์์ ์ปดํฌ๋ํธ์ ์คํ์ผ๋ง ๋ก์ง์ด ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํฉ๋๋ค.
- ์คํฐ๋ธ ๊ท์น ์ ๊ฑฐ: ํ ์คํธ ์คํ ํ, ํ์ ํ ์คํธ์ ๋ฐฉํด๊ฐ ๋์ง ์๋๋ก ํ ์คํธ ํ๊ฒฝ์์ ์คํฐ๋ธ ๊ท์น์ ์ ๊ฑฐํฉ๋๋ค.
์์ ๊ตฌํ (JavaScript์ Jest ์ฌ์ฉ)
JavaScript์ Jest ํ ์คํธ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ ์ค์ ์์ ๋ก ์ค๋ช ํด ๋ณด๊ฒ ์ต๋๋ค.
๋ค์๊ณผ ๊ฐ์ React ์ปดํฌ๋ํธ๊ฐ ์๋ค๊ณ ๊ฐ์ ํด ๋ด ์๋ค:
// MyComponent.jsx
import React from 'react';
function MyComponent({ variant }) {
return (
<div className={`my-component ${variant}`}>
Hello World!
</div>
);
}
export default MyComponent;
๊ทธ๋ฆฌ๊ณ ํด๋นํ๋ CSS๊ฐ ์์ต๋๋ค:
/* MyComponent.css */
.my-component {
padding: 10px;
border: 1px solid black;
}
.my-component.primary {
background-color: blue;
color: white;
}
.my-component.secondary {
background-color: grey;
color: black;
}
์ด์ Jest๋ฅผ ์ฌ์ฉํ์ฌ ํ
์คํธ๋ฅผ ๋ง๋ค๊ณ CSS ์คํฐ๋ธ ๊ท์น์ ํ์ฉํ์ฌ my-component ํด๋์ค๋ฅผ ๊ฒฉ๋ฆฌํด ๋ณด๊ฒ ์ต๋๋ค.
// MyComponent.test.jsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
describe('MyComponent', () => {
let styleElement;
beforeEach(() => {
// ์คํฐ๋ธ ๊ท์น์ ์ํ style ์๋ฆฌ๋จผํธ ์์ฑ
styleElement = document.createElement('style');
styleElement.id = 'stub-rule'; // ์ฌ์ด ์ ๊ฑฐ๋ฅผ ์ํด ID ์ถ๊ฐ
// ์คํฐ๋ธ ๊ท์น ์ ์
styleElement.innerHTML = `
.my-component {
padding: 0px !important; /* ํจ๋ฉ ์ฌ์ ์ */
border: none !important; /* ํ
๋๋ฆฌ ์ฌ์ ์ */
}
`;
// ๋ฌธ์์ ์คํฐ๋ธ ๊ท์น ์ฃผ์
document.head.appendChild(styleElement);
});
afterEach(() => {
// ๊ฐ ํ
์คํธ ํ ์คํฐ๋ธ ๊ท์น ์ ๊ฑฐ
document.getElementById('stub-rule').remove();
});
it('์คํฐ๋ธ ๊ท์น์ผ๋ก ์ธํด ํจ๋ฉ๊ณผ ํ
๋๋ฆฌ ์์ด ๋ ๋๋ง๋๋ค', () => {
render( );
const componentElement = screen.getByText('Hello World!');
// ํจ๋ฉ๊ณผ ํ
๋๋ฆฌ๊ฐ ์ฌ์ ์๋์๋์ง ํ์ธ
expect(componentElement).toHaveStyle('padding: 0px');
expect(componentElement).toHaveStyle('border: none');
});
it('primary ๋ณํ๊ณผ ์คํฐ๋ธ ๊ท์น์ผ๋ก ๋ ๋๋ง๋๋ค', () => {
render( );
const componentElement = screen.getByText('Hello World!');
expect(componentElement).toHaveClass('primary');
expect(componentElement).toHaveStyle('padding: 0px');
expect(componentElement).toHaveStyle('border: none');
});
});
์ค๋ช :
- `beforeEach` ๋ธ๋ก:
<style>์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํฉ๋๋ค.- style ์๋ฆฌ๋จผํธ์
innerHTML๋ด์ CSS ์คํฐ๋ธ ๊ท์น์ ์ ์ํฉ๋๋ค. ์คํฐ๋ธ ๊ท์น์ด ๊ธฐ์กด ์คํ์ผ์ ์ฌ์ ์ํ๋๋ก!important๋ฅผ ์ฌ์ฉํ ๊ฒ์ ์ฃผ๋ชฉํ์ธ์. <style>์๋ฆฌ๋จผํธ๋ฅผ ๋ฌธ์์<head>์ ์ถ๊ฐํ์ฌ ์คํฐ๋ธ ๊ท์น์ ํจ๊ณผ์ ์ผ๋ก ์ฃผ์ ํฉ๋๋ค.
- `afterEach` ๋ธ๋ก: ์ฃผ์
๋
<style>์๋ฆฌ๋จผํธ๋ฅผ ์ ๊ฑฐํ์ฌ ํ ์คํธ ํ๊ฒฝ์ ์ ๋ฆฌํ๊ณ ๋ค๋ฅธ ํ ์คํธ์์ ๊ฐ์ญ์ ๋ฐฉ์งํฉ๋๋ค. - ํ
์คํธ ์ผ์ด์ค:
MyComponent๋ฅผ ๋ ๋๋งํฉ๋๋ค.screen.getByText๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ ์๋ฆฌ๋จผํธ๋ฅผ ๊ฐ์ ธ์ต๋๋ค.- Jest์
toHaveStyle๋งค์ฒ๋ฅผ ์ฌ์ฉํ์ฌ ์๋ฆฌ๋จผํธ์padding๊ณผborder์์ฑ์ด ์คํฐ๋ธ ๊ท์น์ ์ ์๋ ๊ฐ์ผ๋ก ์ค์ ๋์๋์ง ํ์ธํฉ๋๋ค.
๋์์ ์ธ ๊ตฌํ ๋ฐฉ๋ฒ
๋์ ์ผ๋ก <style> ์๋ฆฌ๋จผํธ๋ฅผ ์์ฑํ๋ ๊ฒ ์ธ์๋ CSS-in-JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์คํฐ๋ธ ๊ท์น์ ๋ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ต๋๋ค. Styled Components๋ Emotion๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด JavaScript ์ฝ๋ ๋ด์์ ์ง์ ์คํ์ผ์ ์ ์ํ ์ ์์ด ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ์คํฐ๋ธ ๊ท์น์ ์์ฑํ๊ณ ๊ด๋ฆฌํ๊ธฐ๊ฐ ๋ ์ฌ์์ง๋๋ค. ์๋ฅผ ๋ค์ด, ํ
์คํธ ๋ด์์ props๋ context๋ฅผ ์ฌ์ฉํ์ฌ ์กฐ๊ฑด๋ถ๋ก ์คํ์ผ์ ์ ์ฉํจ์ผ๋ก์จ <style> ํ๊ทธ๋ฅผ ์ฃผ์
ํ๋ ๊ฒ๊ณผ ์ ์ฌํ ํจ๊ณผ๋ฅผ ์ป์ ์ ์์ต๋๋ค.
CSS ์คํฐ๋ธ ๊ท์น ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
CSS ์คํฐ๋ธ ๊ท์น์ ํจ๊ณผ๋ฅผ ๊ทน๋ํํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ธ์:
- ๊ตฌ์ฒด์ ์ธ ์ ํ์ ์ฌ์ฉ: ๋งค์ฐ ๊ตฌ์ฒด์ ์ธ CSS ์ ํ์๋ฅผ ์ฌ์ฉํ์ฌ ์์ ํ๋ ค๋ ์์๋ง ๋์์ผ๋ก ์ง์ ํ์ธ์. ์ด๋ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ค๋ฅธ ์์์ ๋ํ ์คํ์ผ์ ์ค์๋ก ์ฌ์ ์ํ ์ํ์ ์ต์ํํฉ๋๋ค. ์๋ฅผ ๋ค์ด,
.my-component๋ฅผ ๋์์ผ๋ก ํ๋ ๋์div.my-component#unique-id์ ๊ฐ์ด ๋ ๊ตฌ์ฒด์ ์ผ๋ก ์์๋ฅผ ๋์์ผ๋ก ์ง์ ํ์ธ์. - `!important`๋ ์ ์คํ๊ฒ ์ฌ์ฉ:
!important๋ ์คํ์ผ์ ์ฌ์ ์ํ๋ ๋ฐ ์ ์ฉํ ์ ์์ง๋ง, ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด CSS ๋ช ์๋(specificity) ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ต๋๋ค. ์คํฐ๋ธ ๊ท์น์ด ๋ค๋ฅธ ์คํ์ผ๋ณด๋ค ์ฐ์ ์ ์ฉ๋๋๋ก ํ ํ์๊ฐ ์์ ๋๋ง ์ ์คํ๊ฒ ์ฌ์ฉํ์ธ์. - ์คํฐ๋ธ ๊ท์น์ ๋จ์ํ๊ฒ ์ ์ง: ์ปดํฌ๋ํธ๋ฅผ ๊ฒฉ๋ฆฌํ๋ ๋ฐ ํ์ํ ํ์ ์คํ์ผ๋ง ์ฌ์ ์ํ๋ ๋ฐ ์ง์คํ์ธ์. ์คํฐ๋ธ ๊ท์น์ ๋ถํ์ํ ๋ณต์ก์ฑ์ ์ถ๊ฐํ์ง ๋ง์ธ์.
- ํ ์คํธ ํ ์ ๋ฆฌ: ํ์ ํ ์คํธ์์ ๊ฐ์ญ์ ๋ฐฉ์งํ๊ธฐ ์ํด ํ ์คํธ ์คํ ํ์๋ ํญ์ ์คํฐ๋ธ ๊ท์น์ ์ ๊ฑฐํ์ธ์. ์ด๋ ์ผ๋ฐ์ ์ผ๋ก ํ ์คํธ ํ๋ ์์ํฌ์ `afterEach` ๋๋ `afterAll` ํ ์์ ์ํ๋ฉ๋๋ค.
- ์คํฐ๋ธ ๊ท์น ์ ์ ์ค์ํ: ์คํฐ๋ธ ๊ท์น ์ ์๋ฅผ ์ ์ฅํ ์ค์ ์์น๋ฅผ ๋ง๋๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์. ์ด๋ ์ฝ๋ ์ฌ์ฌ์ฉ์ ์ด์งํ๊ณ ํ ์คํธ ์ ์ง ๊ด๋ฆฌ๋ฅผ ๋ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
- ์คํฐ๋ธ ๊ท์น ๋ฌธ์ํ: ๋ค๋ฅธ ๊ฐ๋ฐ์๋ค์ด ํ ์คํธ ๊ณผ์ ์์ ๊ฐ ์คํฐ๋ธ ๊ท์น์ ์ญํ ๊ณผ ๋์์ ์ดํดํ ์ ์๋๋ก ๋ช ํํ๊ฒ ๋ฌธ์ํํ์ธ์.
- CI/CD ํ์ดํ๋ผ์ธ๊ณผ ํตํฉ: CSS ํ ์คํธ๋ฅผ ์ง์์ ํตํฉ ๋ฐ ์ง์์ ์ ๋ฌ ํ์ดํ๋ผ์ธ์ ์ผ๋ถ๋ก ํฌํจ์ํค์ธ์. ์ด๋ ๊ฐ๋ฐ ๊ณผ์ ์ด๊ธฐ์ ์คํ์ผ๋ง ํ๊ท๋ฅผ ๋ฐ๊ฒฌํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
๊ณ ๊ธ ๊ธฐ๋ฒ
๊ธฐ๋ณธ์ ์ธ ๊ตฌํ์ ๋์ด์, ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ์ฌ CSS ํ ์คํธ๋ฅผ ๋์ฑ ํฅ์์ํฌ ์ ์๋ ๊ณ ๊ธ ๊ธฐ๋ฒ์ ํ์ํ ์ ์์ต๋๋ค:
- ๋ฏธ๋์ด ์ฟผ๋ฆฌ ์คํฐ๋น: ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ ์ํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ฅ์น ๋ฐฉํฅ์ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ค์ํ ์กฐ๊ฑด์์ ์ปดํฌ๋ํธ์ ๋ฐ์์ฑ์ ํ ์คํธํ ์ ์์ต๋๋ค. ํ ์คํธ ํ๊ฒฝ ๋ด์์ ๋ทฐํฌํธ ํฌ๊ธฐ๋ฅผ ์์ ํ ๋ค์ ํด๋น ํน์ ํฌ๊ธฐ์์ ์ ์ฉ๋๋ CSS ์คํ์ผ์ ํ์ธํ ์ ์์ต๋๋ค.
- ํ ๋ง ์คํฐ๋น: ํน์ ํ ๋ง์ ์คํ์ผ์ ๊ฐ์ ํ์ฌ ์ปดํฌ๋ํธ๊ฐ ๋ค๋ฅธ ํ ๋ง์์ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋์ง ํ์ธํฉ๋๋ค. ์ด๋ ํ ๋ง๋ณ CSS ๋ณ์๋ ํด๋์ค ์ด๋ฆ์ ์ฌ์ ์ํ์ฌ ๋ฌ์ฑํ ์ ์์ต๋๋ค. ์ด๋ ํนํ ๋ค๋ฅธ ํ ๋ง(์: ๊ณ ๋๋น ๋ชจ๋)์์์ ์ ๊ทผ์ฑ์ ๋ณด์ฅํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
- ์ ๋๋ฉ์ด์ ๋ฐ ์ ํ ํ ์คํธ: ๋ ๋ณต์กํ์ง๋ง, ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ์ฌ ์ ๋๋ฉ์ด์ ๊ณผ ์ ํ์ ์์ ๋ฐ ์ข ๋ฃ ์ํ๋ฅผ ์ ์ดํ ์ ์์ต๋๋ค. ์ด๋ ์ ๋๋ฉ์ด์ ์ด ๋ถ๋๋ฝ๊ณ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ์ง ํ์ธํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ํ ์คํธ ๋ด์์ ์ ๋๋ฉ์ด์ ํ์๋ผ์ธ์ ์ ์ดํ๋ ์ ํธ๋ฆฌํฐ๋ฅผ ์ ๊ณตํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ์ ๊ณ ๋ คํด ๋ณด์ธ์.
- ์๊ฐ์ ํ๊ท ํ ์คํธ ํตํฉ: CSS ์คํฐ๋ธ ๊ท์น์ ์๊ฐ์ ํ๊ท ํ ์คํธ ๋๊ตฌ์ ๊ฒฐํฉํ์ธ์. ์ด๋ฅผ ํตํด ๋ณ๊ฒฝ ์ ํ์ ์ปดํฌ๋ํธ ์คํฌ๋ฆฐ์ท์ ์๋์ผ๋ก ๋น๊ตํ์ฌ ์ฝ๋์ ์ํด ๋์ ๋ ์๊ฐ์ ํ๊ท๋ฅผ ์๋ณํ ์ ์์ต๋๋ค. ์คํฐ๋ธ ๊ท์น์ ์คํฌ๋ฆฐ์ท์ ์ฐ๊ธฐ ์ ์ ์ปดํฌ๋ํธ๊ฐ ์๋ ค์ง ์ํ์ ์๋๋ก ๋ณด์ฅํ์ฌ ์๊ฐ์ ํ๊ท ํ ์คํธ์ ์ ํ๋๋ฅผ ํฅ์์ํต๋๋ค.
๊ตญ์ ํ(i18n) ๊ณ ๋ ค ์ฌํญ
๊ตญ์ ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ CSS๋ฅผ ํ ์คํธํ ๋ ๋ค์ ์ฌํญ์ ๊ณ ๋ คํ์ธ์:
- ํ ์คํธ ๋ฐฉํฅ(RTL/LTR): ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ์ฌ ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ(RTL) ํ ์คํธ ๋ฐฉํฅ์ ์๋ฎฌ๋ ์ด์ ํ์ฌ ์๋์ด ๋ฐ ํ๋ธ๋ฆฌ์ด์ ๊ฐ์ ์ธ์ด์์ ์ปดํฌ๋ํธ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋์ง ํ์ธํ์ธ์. ์ด๋ ์ปดํฌ๋ํธ ๋๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฃจํธ ์์์ `direction` ์์ฑ์ `rtl`๋ก ์ค์ ํ์ฌ ๋ฌ์ฑํ ์ ์์ต๋๋ค.
- ๊ธ๊ผด ๋ก๋ฉ: ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ค๋ฅธ ์ธ์ด์ ๋ํด ์ฌ์ฉ์ ์ ์ ๊ธ๊ผด์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ํ ์คํธ ํ๊ฒฝ์์ ๊ธ๊ผด์ด ์ฌ๋ฐ๋ฅด๊ฒ ๋ก๋๋๋์ง ํ์ธํ์ธ์. ์ ์ ํ ๊ธ๊ผด์ ๋ก๋ํ๊ธฐ ์ํด ์คํฐ๋ธ ๊ท์น ๋ด์์ font-face ์ ์ธ์ ์ฌ์ฉํด์ผ ํ ์๋ ์์ต๋๋ค.
- ํ ์คํธ ์ค๋ฒํ๋ก: ๋ค๋ฅธ ์ธ์ด์์ ์ปดํฌ๋ํธ๊ฐ ํ ์คํธ ์ค๋ฒํ๋ก๋ฅผ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ๋์ง ํ ์คํธํ์ธ์. ๋จ์ด๊ฐ ๊ธด ์ธ์ด๋ ํ ์คํธ๊ฐ ์ปจํ ์ด๋๋ฅผ ๋์น๊ฒ ํ ์ ์์ต๋๋ค. ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ์ฌ ๊ธด ํ ์คํธ ๋ฌธ์์ด์ ์๋ฎฌ๋ ์ด์ ํ๊ณ ์ปดํฌ๋ํธ๊ฐ ์ค๋ฒํ๋ก๋ฅผ ์ฐ์ํ๊ฒ ์ฒ๋ฆฌํ๋์ง(์: ๋ง์ค์ํ ๋๋ ์คํฌ๋กค๋ฐ ์ฌ์ฉ) ํ์ธํ์ธ์.
- ๋ก์ผ์ผ๋ณ ์คํ์ผ๋ง: ์ผ๋ถ ์ธ์ด๋ ๋ค๋ฅธ ๊ธ๊ผด ํฌ๊ธฐ๋ ์ค ๋์ด์ ๊ฐ์ ํน์ ์คํ์ผ ์กฐ์ ์ด ํ์ํ ์ ์์ต๋๋ค. ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ๋ก์ผ์ผ๋ณ ์คํ์ผ์ ์ ์ฉํ๊ณ ์ปดํฌ๋ํธ๊ฐ ๋ค๋ฅธ ๋ก์ผ์ผ์์ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋์ง ํ์ธํ์ธ์.
์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ ์ ๊ทผ์ฑ(a11y) ํ ์คํธ
CSS ์คํฐ๋ธ ๊ท์น์ ์ ๊ทผ์ฑ ํ ์คํธ์์๋ ์ ์ฉํ ์ ์์ต๋๋ค:
- ๋ช ์๋น: ์คํฐ๋ธ ๊ท์น์ ํน์ ์์ ์กฐํฉ์ ๊ฐ์ ํ์ฌ ๋ช ์๋น๋ฅผ ํ ์คํธํ๊ณ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ํ ์คํธ๋ฅผ ์ฝ์ ์ ์๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค. ๊ทธ๋ฐ ๋ค์ `axe-core`์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ์ ๋ช ์๋น ์๋ฐ์ ์๋์ผ๋ก ๊ฐ์ฌํ ์ ์์ต๋๋ค.
- ์ด์ ํ์๊ธฐ: ์คํฐ๋ธ ๊ท์น์ ์ฌ์ฉํ์ฌ ์ด์ ํ์๊ธฐ๊ฐ ๋ช ํํ๊ฒ ๋ณด์ด๊ณ ์ ๊ทผ์ฑ ์ง์นจ์ ์ถฉ์กฑํ๋์ง ํ์ธํ ์ ์์ต๋๋ค. ์์๊ฐ ์ด์ ์ ๋ง์ถ ๋์ `outline` ์คํ์ผ์ ํ ์คํธํ์ฌ ์ฌ์ฉ์๊ฐ ํค๋ณด๋๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฝ๊ฒ ํ์ํ ์ ์๋์ง ํ์ธํ ์ ์์ต๋๋ค.
- ์๋งจํฑ HTML: CSS์ ์ง์ ๊ด๋ จ์ ์์ง๋ง, ์คํฐ๋ธ ๊ท์น์ ์ปดํฌ๋ํธ๊ฐ ์๋งจํฑ HTML ์์๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฌ์ฉํ๊ณ ์๋์ง ํ์ธํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ๋ ๋๋ง๋ HTML ๊ตฌ์กฐ๋ฅผ ๊ฒ์ฌํ์ฌ ์์๊ฐ ์๋๋ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉ๋๊ณ ๋ณด์กฐ ๊ธฐ์ ์ด ์ด๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ํด์ํ ์ ์๋์ง ํ์ธํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
CSS ์คํฐ๋ธ ๊ท์น์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ขฐ์ฑ๊ณผ ์๊ฐ์ ์ผ๊ด์ฑ์ ํฅ์์ํค๋ ๊ฐ๋ ฅํ๊ณ ๋ค์ฌ๋ค๋ฅํ ๊ธฐ์ ์ ๋๋ค. ์ปดํฌ๋ํธ๋ฅผ ๊ฒฉ๋ฆฌํ๊ณ , ์คํ์ผ๋ง ๋ก์ง์ ๊ฒ์ฆํ๋ฉฐ, ์์ธก ๊ฐ๋ฅํ ํ ์คํธ ํ๊ฒฝ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํจ์ผ๋ก์จ ๋ ๊ฒฌ๊ณ ํ๊ณ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด CSS ์ฝ๋๋ฅผ ์์ฑํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด ๊ธฐ์ ์ ๋ฐ์๋ค์ฌ CSS ํ ์คํธ ์ ๋ต์ ํ ๋จ๊ณ ๋์ด์ฌ๋ฆฌ๊ณ ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ์ธ์.